<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Getting Started</title>
  <link rel="stylesheet" href="https://unpkg.com/style.css">
  <style type="text/css">
    .markdown-body {
      max-width: 46em;
      margin: 2em auto;
      padding: 0 1em;
      overflow: hidden;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <main class="markdown-body"><link id="viewx-style-style-0" rel="stylesheet" type="text/css" href="https://unpkg.com/highlight.js@9.18.1/styles/darkula.css">
<!-- <script src="https://unpkg.com/highlight.js@9.18.1/lib/highlight.js"> </script> -->
<hr>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
<hr>
<h1>Getting Started</h1>
<p>JSONX is a library that creates React Elements, JSX, and HTML from JSON. JSONX works by converting JSON Objects that follow the JXM spec into the arguments passed into <a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement</a>. The only required property is the component (which is passed as the <code>type</code> argument)</p>
<pre><code class="hljs language-ts"><span class="hljs-comment">// React Create Element Example</span>
<span class="hljs-title class_">React</span>.<span class="hljs-title function_">createElement</span>(
  <span class="hljs-keyword">type</span>,
  [props],
  [...children]
)

<span class="hljs-comment">// Basic JXM</span>
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = { <span class="hljs-attr">component</span>:<span class="hljs-string">'div'</span>, <span class="hljs-attr">props</span>: { <span class="hljs-attr">title</span>:<span class="hljs-string">'jsonx'</span>, }, <span class="hljs-attr">children</span>:<span class="hljs-string">'hello'</span>, };

<span class="hljs-comment">// JSONX.getReactElement returns a react element </span>
<span class="hljs-title class_">JSON</span>X.<span class="hljs-title function_">getReactElement</span>(<span class="hljs-variable constant_">JXM</span>) =&gt; <span class="hljs-title class_">React</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'div'</span>, { <span class="hljs-attr">title</span>: <span class="hljs-string">'jsonx'</span>, }, <span class="hljs-string">'hello'</span>);

<span class="hljs-comment">// eqivalent to JSX </span>
<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"jsonx"</span>&gt;</span>hello<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> 
</code></pre>
<h2>Usages</h2>
<p>JSONX is great for:</p>
<ul>
<li>Composing UIs programmatically</li>
<li>Using existing React Component Libraries to compose UIs</li>
<li>Using React components with transpilers</li>
<li>Creating simple components with JSON</li>
<li>Rendering components in existing React Applications</li>
</ul>
<p>JSONX is not great for:</p>
<ul>
<li>building extremely complicated components (although it can be done)</li>
</ul>
<h2>Example</h2>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/ka7ghypd/18/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
</td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/ka7ghypd/18/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
</td>
  </tr>
</tbody></table>
<h2>Customizing JSONX</h2>
<p>The JSONX library has a couple of customization options. The library can be customized by setting the configuration on the <code>this</code> property of JSONX methods. The configuration options are:</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">type</span> <span class="hljs-title class_">JSON</span>XConfiguration = {
  <span class="hljs-attr">debug</span>: <span class="hljs-built_in">boolean</span> = <span class="hljs-literal">false</span>; <span class="hljs-comment">// used to debug component rendering errors, and will send exceptions to the logError function</span>
  <span class="hljs-attr">logError</span>: <span class="hljs-function">(<span class="hljs-params">...args: <span class="hljs-built_in">any</span>[]</span>) =&gt;</span> <span class="hljs-built_in">any</span> = <span class="hljs-variable language_">console</span>.<span class="hljs-property">error</span>; <span class="hljs-comment">// default(console.error) by default will log errors to console.error but you can define any custom error logging function</span>
  <span class="hljs-attr">returnJSON</span>: <span class="hljs-built_in">boolean</span> = <span class="hljs-literal">false</span>; <span class="hljs-comment">// used to return a JSON object instead of React Components</span>
  <span class="hljs-attr">disableRenderIndexKey</span>: <span class="hljs-built_in">boolean</span> = <span class="hljs-literal">true</span>; <span class="hljs-comment">// used to disable auto assign props.key</span>
  <span class="hljs-attr">boundedComponents</span>: jsonx[]; <span class="hljs-comment">// array of components to bind "this" to</span>
  <span class="hljs-attr">componentLibraries</span>: { 
    [<span class="hljs-attr">index</span>: libraryName <span class="hljs-keyword">as</span> <span class="hljs-built_in">string</span>]: {
      [<span class="hljs-attr">index</span>: componentName <span class="hljs-keyword">as</span> <span class="hljs-built_in">string</span>]: <span class="hljs-title class_">ReactComponentLike</span>;
    } 
  }; <span class="hljs-comment">// object of custom react components in component library</span>
  <span class="hljs-attr">reactComponents</span>: { [<span class="hljs-attr">index</span>: componentName <span class="hljs-keyword">as</span> <span class="hljs-built_in">string</span>]: <span class="hljs-title class_">ReactComponentLike</span> } <span class="hljs-comment">// custom react components</span>
}


<span class="hljs-comment">//e.g</span>

jsonx.<span class="hljs-property">getReactElementFromJSONX</span>.<span class="hljs-title function_">call</span>(
  { <span class="hljs-attr">debug</span>:<span class="hljs-literal">true</span>, <span class="hljs-attr">reactComponents</span>:{<span class="hljs-title class_">ReactModal</span>}, <span class="hljs-attr">componentLibraries</span>:{ <span class="hljs-title class_">ReactBootstrap</span>, <span class="hljs-title class_">Antd</span>, } }, <span class="hljs-comment">//custom options bound to 'this' </span>
  {
    <span class="hljs-attr">component</span>:<span class="hljs-string">'ReactBootstrap.Container'</span>, <span class="hljs-attr">children</span>:<span class="hljs-string">'hello world'</span>
  });
</code></pre>
<h2>Next: <a href="../using-advanced-props/index.html">Using Advanced Props</a></h2>
<hr>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
</main>


</body></html>